<template>
  <qx-table :option="formOption" :remoteData="remoteData">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="formOption" isSearch @submit="startSearch"></qx-form>
    </template>
    <template v-slot:menuLeftR>
      <q-icon color="warning" name="mdi-map-marker-question cursor-pointer cursor-hover" size="1.5rem">
        <q-tooltip v-bind="$tooltipAttr">
          {{ $t('LogCore.CopyJsonTips', [`${$t('LogCore.ReqParams')}、${$t('Remarks')}`]) }}
        </q-tooltip>
      </q-icon>
    </template>
  </qx-table>
  <JsonPopup v-model="popupVisible" :jsonInfo="jsonInfo" :targetEl="targetEl"></JsonPopup>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { i18n } from 'src/boot/i18n'

const props = defineProps({ rowInfo: Object })

const jsonInfo = ref('')
const searchForm = ref({})
const targetEl = ref(false)
const popupVisible = ref(false)
const remoteData = ref({ dicUrl: '/yfagv/api/execL3TcrNotifyLog/list' })
const formOption = computed(() => {
  return {
    export: true, searchLabelWidth: 70, searchSpan: 12, maxHeight: 'inherit',
    column: [{
      label: `${i18n.t('LogCore.ReqHeader')}`, field: 'reqTitle', search: false, minWidth: 100
    }, {
      label: `${i18n.t('LogCore.ReqParams')}`, field: 'reqParam', search: false,
      minWidth: 120, cellDbClick: handleRowDbClick, classes: row => `reqParam_${row.id} text-grey-8`
    }, {
      label: `${i18n.t('CreationTime')}`, field: 'createdTime', type: 'daterange', minWidth: 85
    }, {
      label: `${i18n.t('Remarks')}`, field: 'remark', search: false, minWidth: 120,
      cellDbClick: handleRowDbClick, classes: row => `remark_${row.id} text-grey-8`
    }]
  }
})

const handleRowDbClick = (row, column = {}) => {
  if (!row[column.field]) return
  jsonInfo.value = row[column.field]
  if (targetEl.value === `.${column.field}_${row.id}`) return popupVisible.value = !popupVisible.value
  popupVisible.value = true
  targetEl.value = `.${column.field}_${row.id}`
}
const formatSearchForm = () => {
  const { rowInfo = {} } = props
  const params = { ...searchForm.value }
  if (searchForm.value.createdTime?.from) {
    params.createdStartTime = params.createdTime?.from
    params.createdEndTime = params.createdTime?.to
    delete params.createdTime
  }
  params.reqCode = rowInfo.id
  return { ...params }
}

const startSearch = (_, done) => {
  remoteData.value.params = formatSearchForm()
  remoteData.value.clearSelected = true
  if (done) done()
}
onMounted(startSearch)
</script>